import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import toNative from '@/utils/toNative'
import { getInsurancePlanList } from '@/api/insurance/period'
import renderModal, { getModelValue, renderForm, type FormModalDto } from '@/components/modal/Modal'
import type { InsurancePlanDto } from '@/api/insurance/period/types'
import Dialog from '@/components/dialog/Index'
import { Col, message, Row } from 'ant-design-vue'

@Component
export class DialogPlanActiveList extends TableRender {
    @Prop() planInfo!: InsurancePlanDto
    @Prop() show!: boolean

    showDialog = false
    noTablePadding = true

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDialog = this.show
        if (this.showDialog) {
            this.basicForm = renderForm(this.basicFormConfig)
            this.getData()
        }
    }

    @Watch('showDialog', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDialog)
    }

    basicFormConfig = this.initBasicFormConfig() as FormModalDto
    initBasicFormConfig() {
        return {
            title: '',
            width: '400px',
            theme: 'light',
            show: false,
            items: {
                insurCompanyName: {
                    name: '公司名称',
                    element: 'text'
                },
                insurCompanyPlanName: {
                    name: '方案名称',
                    element: 'text'
                },
                personSingleQuota: {
                    name: '3类价格',
                    element: 'input'
                },
                personSingleQuota1: {
                    name: '4类价格',
                    element: 'input'
                }
            },
            complete: async () => {
                const data = getModelValue(this.basicFormConfig)
                message.success('更新成功')
                this.basicFormConfig.show = false
            },
            cancel: () => {
                this.basicFormConfig.show = false
            },
            init: () => {}
        } as FormModalDto
    }
    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    tableColumnConfigOld = () => [
        {
            field: 'insurCompanyPlanName',
            title: '方案列表'
        },
        {
            field: 'updateTime',
            title: '更新时间'
        },
        {
            field: 'price',
            title: '3类价格'
        },
        {
            field: 'price',
            title: '1-3类价格'
        },
        {
            field: 'priceFour',
            title: '4类价格'
        },
        {
            field: 'priceFive',
            title: '5类价格'
        },
        {
            field: 'activityStartTime',
            title: '活动开始时间',
            width: 160
        },
        {
            field: 'operate',
            title: '操作',
            fixed: 'right',
            width: 160,
            params: {
                buttons: [
                    {
                        text: '修改',
                        event: (row) => {
                            console.log('修改')
                        }
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ] as TableRenderColumnTypes<InsurancePlanDto>

    getData() {
        this.onPage({
            type: 'current',
            currentPage: 1
        })
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.planInfo?.planId) return []
        return getInsurancePlanList({
            companyId: this.planInfo?.planId,
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    render() {
        return (
            <Dialog v-model={this.showDialog} width="80%" title="方案活动列表" showClose>
                <Row>
                    <Col xl={16} lg={16} md={16} sm={24} xs={24}>
                        {super.renderTable()}
                    </Col>
                    <Col xl={8} lg={8} md={8} sm={24} xs={24}>
                        <div class="border border-solid rounded-sm">
                            <div class="p-16px border-b border-b-solid">公司活动方案</div>
                            <div class="p-16px">{this.basicForm.element()}</div>
                        </div>
                    </Col>
                </Row>
            </Dialog>
        )
    }
}

export default toNative<{ planInfo: InsurancePlanDto }, {}>(DialogPlanActiveList)
